<template>
	<view class="container">
		<nav-header title="官网绑定" custom-nav>
			<template v-slot:right>
			</template>
		</nav-header>
		<view class="container-head">
			绑定后，外部人员添加我司员工时，单元格将会展示企业官网入口。<text style="color: red  !important;">【点我查看效果】</text>
		</view>
		<view class="container-body">
			<view class="item">
				<view>描述：</view>
				<uni-easyinput placeholder="请输入描述"  v-model="formData.description" border="bottom"  maxlength="10"
					 @input="countTitle">
					<template v-slot:right>
						<text>{{ formData.description.length }}/10</text>
					</template>
				</uni-easyinput>
			</view>
			<view class="item">
				<view>网址：</view>
					<up-input placeholder="请输入公司官网" v-model="formData.website">
				<template #prefix>
					<up-text
						text="https://"
						margin="0 3px 0 0"
						type="tips"
					></up-text>
				</template>
			</up-input>
			</view>
			<button class="custom-button"  @tap="confirmModify">确认修改</button>
		</view>
		<view class="container-foot">
			<view>修改记录：</view>
			<view class="history">
				<view class="board" v-for="item in historyList" :key="item.id" @tap="openModal(item.id)">
					<view class="content">
						<view class="fc">
							<text class="tip">描述：</text><text class="sub-title">{{item.title}}</text>
						</view>
						<view class="fc">
							<text class="tip">网址：</text><text class="context">{{item.content}}</text>
						</view>
						<view class="fc">
							<text class="tip">修改人：</text>
							<view class="fs tip">
								<text>{{item.person}}</text>
								<text>{{item.date}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	
	const formData = ref({
	  description: '这是',
	  website: 'example.com'
	});
	// 确认修改的处理方法
	const confirmModify = () => {
	  console.log('确认修改');
	  console.log('描述:', formData.value.description);
	  console.log('网址:', formData.value.website);
	  // 这里可以添加实际的业务逻辑，例如发送请求到服务器
	};
	
	// 定义假数据
	const historyList = ref([
	  {
	    id: 1,
	    title: '页面加载优化',
	    content: 'https://example.com/page-load-optimization',
	    person: '张三',
	    date: '2023-10-01',
	    show: true
	  },
	  {
	    id: 2,
	    title: 'API接口重构',
	    content: 'https://example.com/api-refactor',
	    person: '李四',
	    date: '2023-10-05',
	    show: false
	  },
	  // 更多数据...
	]);
</script>

<style lang="scss" scoped>
	.container{
		margin:20rpx;
	}
	.container-head{
		color: #7F7F7F;
	}
	.item{
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		gap: 10rpx;
	}
	.custom-button {
	  margin-top: 20rpx;
	  background-color: #1989FA; /* 修改背景色为蓝色 */
	  color: white; /* 文字颜色为白色 */
	  border: none; /* 去掉边框 */
	  border-radius: 5px; /* 圆角 */
	  padding: 5px 10px; /* 内边距 */
	  font-size: 16px; /* 字体大小 */
	  cursor: pointer; /* 鼠标悬停时显示指针 */
	}
	.container-foot{
		margin-top: 80rpx;
	}
	.history {
		padding: 30rpx;
	
		.title {
			color: #878787;
			font-size: 30rpx;
		}
	
		.board {
			margin-top: 20rpx;
			border: 1rpx solid #F0F0F0;
			display: flex;
			justify-content: center;
			flex-direction: column;
			position: relative;
	
			.tag {
				position: absolute;
				top: 0;
				right: 0;
			}
	
			.content {
				padding: 0 20rpx 20rpx 20rpx;
				font-size: 30rpx;
	
				.tip {
					color: #5d5d5d;
					width: 120rpx;
					text-align: right;
				}
	
				.sub-title {
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
					flex: 1;
				}
	
				.fc {
					display: flex;
					margin-top: 20rpx;
				}
	
				.fs {
					flex: 1;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
	
				.context {
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
					flex: 1;
				}
			}
		}
	}
</style>
